<script type="text/javascript">
    /*
     the images preload plugin
     */
    (function($) {
        $.fn.preload = function(options) {
            var opts = $.extend({}, $.fn.preload.defaults, options),
                    o = $.meta ? $.extend({}, opts, this.data()) : opts;
            return this.each(function() {
                var $e = $(this),
                        t = $e.attr('rel'),
                        i = $e.attr('href'),
                        l = 0;
                $('<img/>').load(function(i) {
                    ++l;
                    if (l == 2)
                        o.onComplete();
                }).attr('src', i);
                $('<img/>').load(function(i) {
                    ++l;
                    if (l == 2)
                        o.onComplete();
                }).attr('src', t);
            });
        };
        $.fn.preload.defaults = {
            onComplete: function() {
                return false;
            }
        };
    })(jQuery);
</script> 
<script type="text/javascript">
    $(function() {
        //some elements..
        var $ps_container = $('#ps_container'),
                $ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
                $ps_next = $ps_container.find('.ps_next'),
                $ps_prev = $ps_container.find('.ps_prev'),
                $ps_nav = $ps_container.find('.ps_nav'),
                $tooltip = $ps_container.find('.ps_preview'),
                $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
                $links = $ps_nav.children('li').not($tooltip),
                total_images = $links.length,
                currentHovered = -1,
                current = 0,
                $loader = $('#loader');

        /*check if you are using a browser*/
        var ie = false;
        if ($.browser.msie) {
            ie = true;//you are not!Anyway let's give it a try
        }
        if (!ie)
            $tooltip.css({
                opacity: 0
            }).show();


        /*first preload images (thumbs and large images)*/
        var loaded = 0;
        $links.each(function(i) {
            var $link = $(this);
            $link.find('a').preload({
                onComplete: function() {
                    ++loaded;
                    if (loaded == total_images) {
                        //all images preloaded,
                        //show ps_container and initialize events
                        $loader.hide();
                        $ps_container.show();
                        //when mouse enters the pages (the dots),
                        //show the tooltip,
                        //when mouse leaves hide the tooltip,
                        //clicking on one will display the respective image	
                        $links.bind('mouseenter', showTooltip)
                                .bind('mouseleave', hideTooltip)
                                .bind('click', showImage);
                        //navigate through the images
                        $ps_next.bind('click', nextImage);
                        $ps_prev.bind('click', prevImage);
                    }
                }
            });
        });

        function showTooltip() {
            var $link = $(this),
                    idx = $link.index(),
                    linkOuterWidth = $link.outerWidth(),
                    //this holds the left value for the next position
                    //of the tooltip
                    left = parseFloat(idx * linkOuterWidth) - $tooltip.width() / 2 + linkOuterWidth / 2,
                    //the thumb image source
                    $thumb = $link.find('a').attr('rel'),
                    imageLeft;

            //if we are not hovering the current one
            if (currentHovered != idx) {
                //check if we will animate left->right or right->left
                if (currentHovered != -1) {
                    if (currentHovered < idx) {
                        imageLeft = 75;
                    }
                    else {
                        imageLeft = -75;
                    }
                }
                currentHovered = idx;

                //the next thumb image to be shown in the tooltip
                var $newImage = $('<img/>').css('left', '0px')
                        .attr('src', $thumb);

                //if theres more than 1 image 
                //(if we would move the mouse too fast it would probably happen)
                //then remove the oldest one (:last)
                if ($ps_preview_wrapper.children().length > 1)
                    $ps_preview_wrapper.children(':last').remove();

                //prepend the new image
                $ps_preview_wrapper.prepend($newImage);

                var $tooltip_imgs = $ps_preview_wrapper.children(),
                        tooltip_imgs_count = $tooltip_imgs.length;

                //if theres 2 images on the tooltip
                //animate the current one out, and the new one in
                if (tooltip_imgs_count > 1) {
                    $tooltip_imgs.eq(tooltip_imgs_count - 1)
                            .stop()
                            .animate({
                        left: -imageLeft + 'px'
                    }, 150, function() {
                        //remove the old one
                        $(this).remove();
                    });
                    $tooltip_imgs.eq(0)
                            .css('left', imageLeft + 'px')
                            .stop()
                            .animate({
                        left: '0px'
                    }, 150);
                }
            }
            //if we are not using a "browser", we just show the tooltip,
            //otherwise we fade it
            //
            if (ie)
                $tooltip.css('left', left + 'px').show();
            else
                $tooltip.stop()
                        .animate({
                    left: left + 'px',
                    opacity: 1
                }, 150);
        }

        function hideTooltip() {
            //hide / fade out the tooltip
            if (ie)
                $tooltip.hide();
            else
                $tooltip.stop()
                        .animate({
                    opacity: 0
                }, 150);
        }

        function showImage(e) {
            var $link = $(this),
                    idx = $link.index(),
                    $image = $link.find('a').attr('href'),
                    $currentImage = $ps_image_wrapper.find('img'),
                    currentImageWidth = $currentImage.width();

            //if we click the current one return
            if (current == idx)
                return false;

            //add class selected to the current page / dot
            $links.eq(current).removeClass('selected');
            $link.addClass('selected');

            //the new image element
            var $newImage = $('<img/>').css('left', currentImageWidth + 'px')
                    .attr('src', $image);

            //if the wrapper has more than one image, remove oldest
            if ($ps_image_wrapper.children().length > 1)
                $ps_image_wrapper.children(':last').remove();

            //prepend the new image
            $ps_image_wrapper.prepend($newImage);

            //the new image width. 
            //This will be the new width of the ps_image_wrapper
            var newImageWidth = $newImage.width();

            //check animation direction
            if (current > idx) {
                $newImage.css('left', -newImageWidth + 'px');
                currentImageWidth = -newImageWidth;
            }
            current = idx;
            //animate the new width of the ps_image_wrapper 
            //(same like new image width)
            $ps_image_wrapper.stop().animate({
                width: newImageWidth + 'px'
            }, 350);
            //animate the new image in
            $newImage.stop().animate({
                left: '0px'
            }, 350);
            //animate the old image out
            $currentImage.stop().animate({
                left: -currentImageWidth + 'px'
            }, 350);

            e.preventDefault();
        }

        function nextImage() {
            if (current < total_images) {
                $links.eq(current + 1).trigger('click');
            }
        }
        function prevImage() {
            if (current > 0) {
                $links.eq(current - 1).trigger('click');
            }
        }
    });
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">

    $(document).ready(function() {


        $('.projects li figure a img').animate({'opacity': 1}).hover(function() {
            $(this).animate({'opacity': .5});
        }, function() {
            $(this).animate({'opacity': 1});
        });
        $('.zoom img').animate({'opacity': 1}).hover(function() {
            $(this).animate({'opacity': .5});
        }, function() {
            $(this).animate({'opacity': 1});
        });

        $("a[rel=work]").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'titlePosition': 'over',
            'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });
        $("a[rel=recent_work]").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'titlePosition': 'over',
            'titleFormat': function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });


    });
</script>